<h1 class="visually-hidden"><%= t("admin.contests.index.title") %></h1>
<div class="container" data-controller="contest">
  <% if notice %>
    <div class="row" id="alertdiv">
      <div class="alert alert-success alert-dismissible container text-center">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="<%= t('contest.close') %>"></button>
        <h6><%= notice %></h6>
      </div>
    </div>
  <% end %>
  <div class="column contests-header">
    <h3 class="contests-header-title"><%= t("contest.heading") %></h3>
    <p  class="contests-header-description"><%= t("contest.admin.subtitle") %></p>

    <%= link_to "#",
                data:   { bs_toggle: "modal", bs_target: "#host-new-contest-modal" },
                class:  "contest-submission-button" do %>
      <span><%= t("contest.admin.new_contest_button") %></span>
    <% end %>
  </div>
  <div class="contest-page-line"></div>
  <div class="contests-list-wrapper row center-row">
    <% @contests.each do |contest| %>
      <div class="col-lg-3">
        <div class="contest-container">
          <% if contest.live? %>
            <div class="contest-container-header">
              <div class="contest-container-close">
                <%= link_to "#",
                            data:   { bs_toggle: "modal",
                                      bs_target: "#close-contest-confirmation-modal",
                                      contest:   contest },
                            class:  "contest-container-close-button" do %>
                  <span><%= t("contest.close") %></span>
                <% end %>
              </div>

              <div class="contest-container-status-live">
                <span class="contest-container-status-dot"></span>
                <span class="contest-container-status-text"><%= t("contest.status.live") %></span>
              </div>
            </div>
          <% else %>
            <div class="contest-container-header">
              <div class="contest-container-status">
                <span class="contest-container-status-dot"></span>
                <span class="contest-container-status-text"><%= t("contest.status.completed") %></span>
              </div>
            </div>
          <% end %>

          <div class="contest-container-details">
            <h5 class="contest-container-details-number">
              <%= link_to "#{t("contest.contest_container.contest_id")} ##{contest.id}",
                          contest_path(contest.id) %>
            </h5>

            <% if contest.completed? %>
              <h5 class="contest-container-details-entries">
                <%= t("contest.contest_container.entries") %>: <%= contest.submissions.count %>
              </h5>
            <% end %>

            <% if contest.live? %>
              <%= link_to "#",
                          data:   { bs_toggle: "modal",
                                    bs_target: "#update-contest-modal",
                                    contest:   contest,
                                    deadline:  contest.deadline.strftime("%Y-%m-%dT%H:%M") },
                          class:  "contest-container-update-button" do %>
                <%= image_tag("svgs/editGroup.svg", alt: t("admin.contests.index.edit_deadline_alt")) %>
                <span><%= t("edit") %></span>
              <% end %>
            <% end %>
          </div>
        </div>
      </div>

      <%= render Admin::ContestCloseModalComponent.new(contest: contest) %>
      <%= render Admin::ContestUpdateDeadlineModalComponent.new(contest: contest) %>
    <% end %>
  </div>
  <div class="container pagination-cont">
    <%= will_paginate @contests, renderer: PaginateRenderer %>
  </div>
  <% if @contests.empty? %>
    <div class="col-12 row center-row d-flex justify-content-center">
      <div class="search-no-results-image">
        <%= image_tag "svgs/noProject.svg", alt: t("contest.no_result_image_alt") %>
        <h6><%= t("contest.no_contest") %></h6>
      </div>
    </div>
  <% end %>
  <%= render Admin::ContestHostNewModalComponent.new %>
</div>
